<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <!-- 引入 Vue 2 的 CDN 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>今天天气是{{info}}</h2>
        <button @click="change">切换天气</button>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isHot: false,
            },
            computed: {
                info() {
                    return this.isHot?'炎热':'凉爽';
                } 
            },
            methods: {
                change() {
                    this.isHot = !this.isHot
                }
            },
            // watch: {
            //     info:{
            //         immediate:true,// 立即执行一次
            //         handler(newVal, oldVal) {
            //             console.log('天气变化了，从', oldVal, '变成了', newVal);
            //         },
            //     }
            // }
        });
        //这个可以后续再去监事
        vm.$watch('info', {
            immediate:true,// 立即执行一次
            handler(newVal, oldVal) {
                console.log('天气变化了，从', oldVal, '变成了', newVal);
            },
        });
    </script>

</body>
</html> 